<template>
  <div class="search">
    <div class="top">
      <div class="back">
        <i class="iconfont icon-fanhui" @click="$router.go(-1)"></i>
      </div>
      <div class="input_box">
        <input type="text" placeholder="请输入搜索内容" v-model="ipvalue" value @keyup.enter="searchinfo" />
        <i class="iconfont icon-icon-del2" v-if="ipvalue!=''" @click="empty"></i>
      </div>
      <div class="searchinfo" @click="searchinfo">
        <i class="iconfont icon-sousuo"></i>
      </div>
    </div>
    <div class="hot">
      <p>热搜</p>
      <div class="hot_box">
        <div
          class="item"
          v-for="(item ,index) in hotlist"
          :key="index"
          @click="hoton(item.first)"
        >{{item.first}}</div>
      </div>
    </div>
    <div
      class="wrapper"
      ref="wrapper"
      :style="{'top':ifshowhot?'250px':'60px','bottom':$store.state.curindex!=-1?'40px':''}"
    >
      <div class="content">
        <div class="result">
          <div class="list" v-if="searchres.length!=0">
            <div class="result_item" v-for="(item,index) in searchres" :key="index">
              <div class="item_name" @click="playsong(index,searchres)">
                <p>{{item.name}}</p>
                <span>{{item.artists[0].name}}</span>
              </div>
              <div class="icon_box">
                <i class="iconfont icon-tianjia" @click="add_curlist(item)"></i>
                <i class="iconfont icon-liebiao-dian"></i>
              </div>
            </div>
          </div>
        </div>
        <zeroLoading v-if="pulluploading"></zeroLoading>
        <div v-if="!pullup">没有更多了</div>
      </div>
    </div>
  </div>
</template>


<script>
import BScroll from "better-scroll";
import { Toast } from "mint-ui";
export default {
  name: "search",
  data() {
    return {
      hotlist: null, // 热搜列表
      ipvalue: "", // input的值
      ifshowhot: true, // 是否展示热搜提示
      searchres: [], // 搜索结果
      pulluploading: false, // 上拉加载动画
      pullup: true, // 上拉开关
      offset: 0 // 搜索接口偏移值
    };
  },
  methods: {
    hoton(val) {
      this.ipvalue = val;
    },
    searchinfo() {
      this.ifshowhot = false;
      let { search } = this.api;
      search.params = { keywords: this.ipvalue };
      this.getsource(search).then(res => {
        console.log("搜索结果", res.data);
        this.searchres = res.data.result.songs;
      });
    },
    playsong(index, searchres) {
      this.audio.playSong(searchres[index].id);
      this.$store.commit("openPlayer", true);
      let curlist = JSON.parse(JSON.stringify(searchres));
      this.$store.commit("curPlayList", curlist);
      this.$store.commit("curIndex", index);
    },
    empty() {
      this.ipvalue = "";
      this.ifshowhot = true;
      this.searchres = [];
    },
    add_curlist(item) {
      this.$store.commit("addCurList", item);
      Toast({
        message: "下一首播放",
        duration: 2000
      });
      if (this.$store.state.curindex == -1) {
        this.audio.playSong(item.id);
        this.$store.commit("curIndex", 0);
      }
    }
  },
  created() {
    let { searchhot } = this.api;
    this.getsource(searchhot).then(res => {
      // console.log("热搜", res.data);
      this.hotlist = res.data.result.hots;
    });
  },
  // better-scroll的函数
  mounted() {
    this.$nextTick(() => {
      //$refs绑定元素
      if (!this.scroll) {
        this.scroll = new BScroll(this.$refs.wrapper, {
          //开启点击事件 默认为false
          click: true,
          mouseWheel: true,
          probeType: 3,
          pullUpLoad: {
            threshold: -50,
          }
        });
        //上拉加载
        this.scroll.on("pullingUp", () => {
          console.log("上拉");
          //判断是否还需要加载更多
          if (this.pullup) {
            this.pulluploading = true;
            this.offset += 30;
            let { search } = this.api;
            search.params = { keywords: this.ipvalue, offset: this.offset };
            this.getsource(search).then(res => {
              console.log("搜索结果", res.data);
              // 如果目前的列表和搜索结果的长度相等,则关闭上拉加载
              if (this.searchres.length == res.data.result.songCount) {
                this.pullup = false;
              } else {
                res.data.result.songs.forEach(item => {
                  this.searchres.push(item);
                });
              }
            });
          }
          this.scroll.finishPullUp();
          setTimeout(() => {
            // 事情做完，需要调用此方法告诉 better-scroll 数据已加载，否则下拉事件只会执行一次
            this.pulluploading = false;
          }, 1500);
        });
      } else if (!this.$refs.wrapper) {
        return;
      } else {
        this.scroll.refresh();
      }
    });
  }
};
</script>


<style lang='scss'>
.search {
  width: 100%;
  height: 100%;
  padding: 10px 0;
  .top {
    height: 40px;
    display: flex;
    justify-content: space-between;
    .back {
      line-height: 40px;
      width: 10vw;
    }
    .input_box {
      width: 70vw;
      // border: 1px solid #2e2e2e;
      box-sizing: border-box;
      display: flex;
      border-radius: 20px;
      overflow: hidden;
      line-height: 40px;
      background: #dfdfdf;
      position: relative;
      font-size: 12px;
      i {
        position: absolute;
        right: 15px;
      }
      input {
        background: #dfdfdf;
        // line-height: 38px;
        width: 100%;
        border: none;
        text-align: center;
      }
    }
    .searchinfo {
      width: 10vw;
      line-height: 40px;
      margin-right: 10px;
      i {
        font-size: 22px;
        color: #6c6c6c;
        font-weight: 450;
      }
    }
  }
  .hot {
    margin: 15px;
    p {
      text-align: left;
      font-weight: 550;
    }
    .hot_box {
      display: flex;
      flex-flow: row wrap;
      max-height: 160px;
      overflow: hidden;
      .item {
        border: 1px solid #6c6c6c;
        border-radius: 10px;
        font-size: 12px;
        margin: 5px;
        padding: 5px 8px;
      }
    }
  }
  .wrapper {
    position: absolute;
    top: 130px;
    bottom: 0;
    width: 100%;
    overflow: hidden;
    transition: all 0.5s;
    background-color: #fff;
    .result {
      .list {
        padding: 15px;
        .result_item {
          text-align: left;
          border-bottom: 1px solid #949494;
          padding: 5px 0;
          display: flex;
          justify-content: space-between;
          .item_name {
            width: 80%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            p {
              line-height: 20px;
              font-size: 14px;
            }
            span {
              font-size: 10px;
              color: #949494;
              line-height: 14px;
            }
          }
          .icon_box {
            i {
              margin: 0 8px;
              line-height: 40px;
            }
          }
        }
      }
    }
  }
}
</style>